<template>
	<!-- 已买到的货品 -->
	<view class="content">
		<el-form ref="form" :model="parameter" label-width="80px" class="orderStatus">
			<el-form-item label="商品名称:">
				<el-input class="mr-2" v-model="parameter.Article_Name" style="width: 188px"
					placeholder="请输入商品名称"></el-input>
				<el-button @click="Query()" type="primary" size="small">查询</el-button>
			</el-form-item>
		</el-form>
		<view class="tabs orderStatus">
			<view v-for="(item, index) in orderStatus" :key="index" :class="{ viewfu: selectedIndex === index }"
				@click="toggleStatus(index)">{{ item }}</view>
		</view>

		<el-table border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
			:data="tableData">
			<el-table-column label="商品信息">
				<template slot-scope="scope">
					<!-- <view
            class="flex bg-success text-white"
            style="
              width: 50rpx;
              height: 100%;
              flex-direction: column;
              white-space: pre-wrap;
              position: absolute;
              left: 0rpx;
              align-items: center;
              justify-content: center;
              border-radius: 14rpx 0 0 14rpx;
            "
            >溯源</view
          > -->
					<image :src="Domain_IMG + scope.row.Picture_URL" alt="商品图片" class="img" />
				</template>
			</el-table-column>
			<el-table-column label="所属企业">
				<template v-slot="{ row }">
					<el-tooltip effect="dark" :content="row.Enterprise_Name" placement="top">
						<view class="text-ellipsis w-100">
							<text>{{ row.Enterprise_Name }}</text>
						</view>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="Article_Name" label="商品名称">
				<template v-slot="{ row }">
					<el-tooltip effect="dark" :content="row.Article_Name" placement="top">
						<view class="text-ellipsis w-100">
							<text>{{ row.Article_Name }}</text>
						</view>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="Quantity" label="交易数量">
				<template v-slot="{ row }">
					<text>{{ row.Quantity }}{{ row.Unit }}</text>
				</template>
			</el-table-column>
			<el-table-column prop="Trading_Name" label="付款方式">
				<template v-slot="{ row }">
					<el-tooltip effect="dark" :content="row.Trading_Name" placement="top">
						<view class="text-ellipsis w-100">
							<text>{{ row.Trading_Name }}</text>
						</view>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="Amount" label="应付金额">
				<template v-slot="{ row }">
					<text>￥{{
              (Number(row.Amount) * Number(row.Quantity)).toFixed(2)
            }}</text>
				</template>
			</el-table-column>
			<el-table-column prop="Collection_Amount" label="实付金额">
				<template v-slot="{ row }">
					<text>￥{{ Number(row.Collection_Amount).toFixed(2) }}</text>
				</template>
			</el-table-column>
			<el-table-column label="待付金额">
				<template v-slot="{ row }">
					<text>￥{{
              (Number(row.Amount) - Number(row.Collection_Amount)).toFixed(2)
            }}</text>
				</template>
			</el-table-column>
			<el-table-column label="交易状态" width="100">
				<template v-slot="{ row }">
					<text v-if="row.Row_Status == '0' && row.Buyer_Status == '0'">待对方审核</text>
					<text v-if="row.Row_Status == '2' && row.Buyer_Status == '0'">对方拒绝您的申请</text>
					<text v-if="(row.Row_Status == '1' && row.Buyer_Status == '0') || (row.Row_Status == '4' && row.Buyer_Status == '0')">待确认合同</text>
					<text v-if="row.Row_Status == '1' && row.Buyer_Status == '4'">待对方确认合同</text>
					<text v-if="row.Row_Status == '5'">待收货</text>
					<view v-if="row.Trading_Name != '全款'" class="">
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000001_1')
              ">待对方发货</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000001_0') &&
                row.Buyer_Status != '0'
              ">待我方付首款</text>
						<text v-if="
                row.Row_Status == '6' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000002_0') &&
                row.Trading_Detail_SerialNumber.includes('T01000000000001_1')
              ">待我方付下一笔款</text>
						<text v-if="
                row.Row_Status == '6' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000003_0') &&
                row.Trading_Detail_SerialNumber.includes('T01000000000002_1')
              ">待我方付下一笔款</text>
						<text v-if="
                row.Row_Status == '6' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000004_0') &&
                row.Trading_Detail_SerialNumber.includes('T01000000000003_1')
              ">待我方付尾款</text>
					</view>
					<view v-if="row.Trading_Name == '全款'" class="">
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000001_0')
              ">待我方付全款</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000002_0')
              ">待我方付全款</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000003_0')
              ">待我方付全款</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000004_0')
              ">待我方付全款</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000001_1')
              ">待对方发货</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000002_1')
              ">待对方发货</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000003_1')
              ">待对方发货</text>
						<text v-if="
                row.Row_Status == '4' &&
                row.Buyer_Status == '4' &&
                row.Trading_Detail_SerialNumber.includes('T01000000000004_1')
              ">待对方发货</text>
					</view>
					<text v-if="
              row.Row_Status == '6' &&
              row.Buyer_Status == '4' &&
              Number(row.Amount) == Number(row.Collection_Amount)
            ">交易结束</text>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template v-slot="{ row }">
					<el-button :loading="loading" v-if="
              (row.Row_Status == '1' || row.Row_Status == '4') &&
              row.Buyer_Status != '4'
            " @click="getOriginal(row, '4')" type="success" size="small">确认合同</el-button>
					<view v-else class="">
						<view v-if="row.Trading_Name == '全款'" class="">
							<el-button v-if="
                  (row.Buyer_Status == '4' && row.Row_Status == '6') ||
                  (row.Buyer_Status == '4' && row.Row_Status == '4')
                " @click="viewDetails(row)" type="success" size="small">付款详情</el-button>
						</view>
						<view v-else>
							<el-button v-if="
                  (row.Row_Status == '4' &&
                    row.Buyer_Status == '4' &&
                    row.Trading_Detail_SerialNumber.includes(
                      'T01000000000001_0'
                    )) ||
                  (row.Row_Status == '4' &&
                    row.Trading_Detail_SerialNumber.includes(
                      'T01000000000002_0'
                    )) ||
                  (row.Row_Status == '5' &&
                    row.Trading_Detail_SerialNumber.includes(
                      'T01000000000003_0'
                    )) ||
                  (row.Row_Status == '6' &&
                    row.Trading_Detail_SerialNumber.includes(
                      'T01000000000004_0'
                    )) ||
                  (row.Row_Status == '6' && row.Buyer_Status == '4')
                " @click="viewDetails(row)" type="success" size="small">付款详情</el-button>
						</view>
						<el-button :loading="loading" v-if="row.Row_Status == '5'" @click="GroupTransactionState(row)"
							size="small">确认收货</el-button>
					</view>
				</template>
			</el-table-column>
		</el-table>
		<view class="pagination mt-2">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="parameter.page" :page-sizes="[1, 5, 10, 20]" :page-size="parameter.limit"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</view>
		<el-dialog width="400" title="商品详情" :visible.sync="dialogTableVisible">
			<el-table :data="gridData">
				<el-table-column align="center" label="商品图片">
					<template v-slot="{ row }">
						<image style="width: 100rpx; height: 100rpx" :src="Domain_IMG + row.Picture_URL" mode="">
						</image>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="Article_Name" label="商品名称">
					<template v-slot="{ row }">
						<el-tooltip effect="dark" :content="row.Article_Name" placement="top">
							<view class="text-ellipsis w-100">
								<text>{{ row.Article_Name }}</text>
							</view>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column align="center" label="联系人">
					<template v-slot="{ row }">
						<el-tooltip effect="dark" :content="row.Contacts" placement="top">
							<view class="text-ellipsis w-100">
								<text>{{ row.Contacts }}</text>
							</view>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column align="center" label="联系人手机号">
					<template v-slot="{ row }">
						<el-tooltip effect="dark" :content="row.Contacts_Phone" placement="top">
							<view class="text-ellipsis w-100">
								<text>{{ row.Contacts_Phone }}</text>
							</view>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="Enterprise_Name" label="对方企业">
					<template v-slot="{ row }">
						<el-tooltip effect="dark" :content="row.Enterprise_Name" placement="top">
							<view class="text-ellipsis w-100">
								<text>{{ row.Enterprise_Name }}</text>
							</view>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column align="center" label="需求总数">
					<template v-slot="{ row }">
						<text>{{ row.Total_Quantity }}{{ row.Unit }}</text>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="Trading_Name" label="付款周期"></el-table-column>
				<el-table-column align="center" prop="address" label="购买数量">
					<template v-slot="{ row }">
						<text>{{ row.Quantity }}{{ row.Unit }}</text>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="address" label="单价">
					<template v-slot="{ row }">
						<text>￥{{ row.Amount }}</text>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!--  -->
	</view>
</template>

<script>
	const app = getApp();
	import times from "@/static/js/utils.js";
	import {
		Message
	} from "element-ui";
	import {
		getGroupTransactionAllAction
	} from "@/api/purchasedgoods.js";
	import {
		getSubtableInquiryOriginal,
		getEditAction
	} from "@/api/global.js";
	import {
		GroupTransactionStateAction
	} from "@/api/group.js";
	export default {
		name: "grzxArrived",
		data() {
			return {
				loading: false,
				Domain_IMG: app.globalData.Domain_IMG,
				dialogTableVisible: false,
				tableData: [],
				gridData: [],
				total: 0,
				parameter: {
					Type: "0",
					Article_Name: "",
					Row_Status: "",
					Group_Purchasing_SerialNumber: "",
					Enterprise_Info_SerialNumber: uni.getStorageSync("loginInfo").enterprise,
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				orderStatus: ["全部", "待对方审核", "待付款", "待确认收货", "交易成功"],
				selectedIndex: 0,
			};
		},
		methods: {
			viewDetails(row) {
				uni.setStorageSync("detail", JSON.stringify(row));
				uni.navigateTo({
					url: "/pages/order/supply-order-detail?Group_Transaction_SerialNumber=" +
						row.Group_Transaction_SerialNumber +
						"&Enterprise_Info_SerialNumber=" +
						row.Enterprise_Info_SerialNumber,
				});
			},
			handleCurrentChange(val) {
				this.parameter.page = val;
				this.purchasedGoods(this.parameter);
			},

			handleSizeChange(val) {
				this.parameter.page = 1;
				this.parameter.limit = val;
				console.log(val);
				this.purchasedGoods(this.parameter);
			},
			async purchasedGoods(data) {
				const res = await getGroupTransactionAllAction({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.navigateTo({
						url: "/pages/login/login?expire=1",
					});
				} else if (res.Status == "success") {
					this.tableData = res.tableData;
					console.log(this.tableData);
					this.total = Number(res.limit);
				}
			},
			async getOriginal(row, i) {
				this.loading = true;
				let obj = {
					// 采购信息表
					group_transaction: {
						group_transaction_paystages: {},
					},
				};
				let data = {
					Primary_Key: row.Group_Transaction_SerialNumber,
					JSONObject: JSON.stringify(obj),
					token: uni.getStorageSync("loginInfo").token,
				};
				const res = await getSubtableInquiryOriginal({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {} else {
					console.log(res);
					res.group_transaction[0].Buyer_Status = i;
					this.getEdit(res.group_transaction[0]);
				}
			},
			async getEdit(res) {
				let group_message_buyer = {
					Group_Message_SerialNumber: "",
					Group_Transaction_SerialNumber: res.Group_Transaction_SerialNumber,
					Cause: "确认合同",
					Submission_Time: times.nowtime(),
					Enterprise_Info_SerialNumber: uni.getStorageSync("loginInfo").enterprise,
					Seller_Type: "0",
				};
				let data = {
					Data: JSON.stringify({
						Modify: {
							group_transaction: [res],
						},
						Add: {
							group_message: [group_message_buyer],
						},
					}),
					token: uni.getStorageSync("loginInfo").token,
				};
				const res1 = await getEditAction({
					data,
				});
				if (res1.redirect && res1.redirect == "REDIRECT") {
					console.log(res1.redirect);
				} else {
					console.log(res1);
					Message({
						message: "已确认合同！",
						type: "success",
					});
					this.loading = false;
					this.purchasedGoods(this.parameter);
				}
			},
			async GroupTransactionState(row) {
				this.loading = true;
				let data = {
					Group_Transaction_SerialNumber: row.Group_Transaction_SerialNumber, //主键名
					token: uni.getStorageSync("loginInfo").token,
				};
				const res = await GroupTransactionStateAction({
					data,
				});
				Message({
					message: "已确认收货！",
					type: "success",
				});
				this.loading = false;
				this.purchasedGoods(this.parameter);
			},
			toggleStatus(index) {
				if (this.selectedIndex == index) {
					return;
				}
				this.selectedIndex = index;
				console.log(index);
				if (index == 0) {
					this.parameter.Row_Status = "";
				} else if (index == 1) {
					this.parameter.Row_Status = "0";
				} else if (index == 2) {
					this.parameter.Row_Status = "4";
				} else if (index == 3) {
					this.parameter.Row_Status = "5";
				} else {
					this.parameter.Row_Status = "6";
				}
				this.purchasedGoods(this.parameter);
			},
			Query() {
				this.purchasedGoods(this.parameter);
			},
			goDetail(row) {
				console.log(row);
				this.gridData = [];
				this.gridData.push(row);
				this.dialogTableVisible = true;
			},
		},
		created() {
			this.purchasedGoods(this.parameter);
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx;
		// margin-top: 20rpx;
		background-color: #fff;

		.el-form {
			display: flex;
			flex-wrap: wrap;
		}

		/deep/ .el-col-2 {
			margin: 0 20rpx;
			width: auto;
		}

		.search-operation {
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				cursor: pointer;
				margin-right: 20rpx;
				padding: 20rpx 40rpx;
				border-radius: 20rpx;
				background-color: #39bf3e;
				color: #fff;
			}

			view:nth-child(2) {
				border: 1px solid #f5f5f5;
				background-color: #ffffff;
				color: black;
			}
		}

		.tabs {
			width: 100%;
			height: 88rpx;
			margin: 20rpx 0;
			background-color: #fff;
			display: flex;
			cursor: pointer;

			view {
				background-color: #fff;
				color: black;
				float: left;
				height: 88rpx;
				font-size: 28rpx;
				letter-spacing: 0.7px;
				padding: 24rpx 70rpx;
				box-sizing: border-box;
			}

			.viewfu {
				background-color: #45b035;
				color: #fff;
			}
		}

		.title {
			background: #f2f2f2;
			height: 80rpx;
			font-size: 28rpx;
			color: #333;
			letter-spacing: 0.7px;
			display: flex;

			.header-item {
				line-height: 80rpx;
				text-align: center;
			}
		}

		.search {
			margin: 20rpx 0;
			display: flex;
			flex-wrap: wrap;

			button {
				color: #e1e1e1;
				background: #f8f8fa;
				margin: 0;
				width: 200rpx;
				height: 80rpx;
				background: #f8f8fa;
				border-radius: 4rpx;
				border: none;
				color: #666;
				text-align: center;
				text-decoration: none;
				font-size: 28rpx;
				line-height: 80rpx;
			}
		}

		.foot {
			text-align: center;
			height: 80rpx;
		}

		.pagination {
			display: flex;
			justify-content: flex-end;
		}

		.img {
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>